<template>
	<div>
		<el-row :gutter="24" v-if="interFaceShow == 'report'">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">出单日期 :</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="mapData.time" size="small" style="width:90%" type="date" clearable placeholder="选择时间">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">投保类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.insuranceType" placeholder="请选择投保类型" clearable>
					<el-option label="新保" value="sb">
					</el-option>
					<el-option label="续保" value="xb">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="brand" @change="getCompanyInfo" placeholder="请选择品牌" clearable>
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="interFaceShow == 'report'">

			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="2" style="text-align: center;">
				<el-button size="small" type="primary" @click="query">查询</el-button>
			</el-col>
			<el-col :span="17" style="margin-left: -10px; text-align: right;">
				<el-button size="small" type="primary" @click="processOut" v-loading.fullscreen.lock="fullscreenLoading">导出</el-button>
			</el-col>
		</el-row>
		<el-row v-if="interFaceShow == 'report'">
			<div class="report_Fixedwidth">
				<table class="report_table" id="daySummary" cellspacing="0" width="100%" cellpadding="0">
					<tbody>
						<tr class="texttbody" height="60px;">
							<th scope="col" style="width: 120px;">保险公司</th>
							<th scope="col" style="width: 90px;">总个数</th>
							<th scope="col" style="width: 90px;">保费</th>
							<th scope="col" style="width: 90px;">车船税</th>
							<th scope="col" style="width: 90px;">佣金</th>
							<th scope="col" style="width: 100px;">店端加投佣金</th>
							<th scope="col" style="width: 100px;">店端抵现金额</th>
							<th scope="col" style="width: 90px;">返现金额</th>
							<th scope="col" style="width: 90px;">赠送成本</th>
							
							<th scope="col" style="width: 90px;">追加个数</th>
							<th scope="col" style="width: 90px;">追加保费</th>
							<th scope="col" style="width: 90px;">退保个数</th>
							<th scope="col" style="width: 90px;">退保保费</th>
						</tr>
						<tr v-for="item in tableData.dataList">
							<td>{{item.insuranceCompanyName}}</td>
							<td>{{item.count}}</td>
							<td>{{item.nVVTPrice}}</td>
							<td>{{item.VVULPT}}</td>
							<td>{{item.commissionPrice}}</td>
							<td>{{item.syAddCommissionPrice}}</td>
							<td>{{item.distCount}}</td>
							<td>{{item.backprice}}</td>
							<td>{{item.couponPrice}}</td>
							
							<td>{{item.addOrderCount}}</td>
							<td>{{item.addOrderPrice}}</td>
							<td>{{item.backOrderCount}}</td>
							<td>{{item.backOrderPrice}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</el-row>
		<insurancePolicy v-if="interFaceShow == 'order'" :show="interFaceShow" :data="orderMapData" v-on:showChange="back"></insurancePolicy>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>
	</div>
</template>

<script>
	import insurancePolicy from '../assembly/insurancePolicy.vue'
	import exports from '../../plugins/exportModule.vue'
	export default {
		data: function() {
			return {
				//表格数据导出
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//表格名字
				excelName: "保险日报表汇总.xls",
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				area: "",
				brand: "",
				interFaceShow: "report",
				fullscreenLoading: false,
				CurentPage: 1,
				page: 30,
				//表格数据
				tableData: {
					total: 0,
					dataList: []
				},
				mapData: {
					time: new Date(),
					insuranceType: '',
					companyId: "",
				},
				//保险单查询条件
				orderMapData: {
					companyId: '',
					insureType: '',
					outOrderStartDate: "",
					outOrderStopDate: "",
					insuranceType: "",
					insuranceCompanyId: '', //保险公司ID
				},
				btnGroup: {},
			}
		},
		methods: {
			//导出 
			processOut: function() {
				debugger;
				this.$data.tableId = "daySummary";
				this.$data.template = "<template><div><el-row><div><table border='1'>{table}</table></div></el-row></div></template>";
			},
			//导出回调函数
			backFunction: function() {
				this.$data.tableId = "";
			},
			//组件回调函数
			back: function() {
				this.$data.interFaceShow = "report";
				this.query();
			},
			//日报表双击单元格
			dblclick: function(row, column, cell, event) {
				debugger;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				} else {
					this.$data.mapData.time = new Date();
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				}
				if(column.property == "count") {
					this.$data.orderMapData.companyId = row.companyId;
					this.$data.orderMapData.insureType = this.$data.mapData.insuranceType;
					this.$data.orderMapData.outOrderStartDate = this.$data.mapData.time;
					this.$data.orderMapData.outOrderStopDate = this.$data.mapData.time;
					this.$data.orderMapData.insuranceCompanyId = row.insuranceCompanyId;
					this.$data.interFaceShow = "order";
				}
			},
			//日报表导出
			dayReportOut: function() {
				this.$data.fullscreenLoading = true;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				} else {
					this.$data.mapData.time = '';
				}
				this.$http.post(this.API_ROOT + '/insurance/statstics/day/exp/execl', this.$data.mapData, {
						params: {}
					})
					.then(resp => {
						this.$data.fullscreenLoading = false;
						if(resp.data.success) {

							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + resp.data.data + "&&fileName=保险日报表-" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}
					}, resp => {});
			},
			handleSizeChange: function() {

			},
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.mapData.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.mapData.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				//获取功品牌下拉
				this.$http.get(this.API_ROOT + '/rbac/dept/brand/all', {}).then((response) => {
					this.$data.brandCombo = response.data.dataList;
				}, (response) => {});
			},
			query: function() {
				debugger;
				if(this.$data.mapData.time) {
					this.$data.mapData.time = this.moment(this.$data.mapData.time).format("YYYY-MM-DD");
				} else {
					this.$data.mapData.time = "";
				}
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/insurance/statstics/sales', //url
					body: this.$data.mapData,
					params: { //发送的参数
					}
				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					this.$data.tableData = resp.data;
				}, function(error) {
					// error
				})
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			this.query();
			//获取按钮权限
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
				params: { //发送的参数
					resPath: "bx/dayReport", ////查询条件 按照输入的车牌号
				}
			}).then(function(resp) {
				debugger;
				var btnData = resp.data.dataList;

				var temp = {};

				for(var i = 0; i < btnData.length; i++) {

					var btnName = btnData[i].btnName;

					temp[btnName] = btnName;

				}

				Object.assign(this.$data.btnGroup, temp);
			}, function(error) {
				// error
			});
		},
		components: {
			insurancePolicy,
			exports
		}
	}
</script>

<style>

</style>